<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="count++">累加</button>
    <button @click="remove">卸载</button>
    <Child :count = "count"/>
  </div>
</template>

<script>
import Child from "./components/childe.vue";
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  components: {
    Child,
  },
  methods: {
    remove() {
      //卸载组件
      this.$destroy();
    },
  },
  /* 
      父子组件生命周期流程:
      //初始化: 
        父组件的beforeCreate --> 父组件的created --> 父组件的beforeMount
        -->子组件的beforeCreate --> 子组件的created --> 子组件的beforeMount
        -->子组件的mounted-->父组件mounted



      //更新:
        当子组件没有用到父组件数据的时候(不仅限于props),父组件更新,子组件不会触发任何的更新
        当子组件用到了父组件的数据时 父组件beforeUpdate-->子组件beforeUpdate-->子组件updated-->父组件updated


      //卸载: 
        父组件卸载: 父组件beforeDestroy-->子组件beforeDestroy-->子组件destroyed-->父组件destroyed
        子组件卸载: 子组件beforeDestroy-->子组件destroyed

    */

  beforeCreate() {
    console.log("****beforeCreate****");
  },

  created() {
    console.log("****created****");
  },

  beforeMount() {
    console.log("****beforeMount****");
  },

  mounted() {
    console.log("****mounted****");
  },

  beforeUpdate() {
    console.log("****beforeUpdate****");
  },

  updated() {
    console.log("****updated****");
  },

  beforeDestroy() {
    console.log("****beforeDestroy****");
  },

  destroyed() {
    console.log("****destroyed****");
  },
};
</script>

<style>
</style>